<template>
  <div class="travelMall">
    <!-- banner -->
    <div>
      <van-image
        @click="$router.push('/graduation')"
        class="banner"
        src="https://assets.cdn.uniqueway.com/assets/img/welcome/theme/graduation/mobile/title.jpg"
      ></van-image>
      <!-- <img src="" alt="" class="banner" /> -->
      <router-link tag="div" to="/search" class="search-header">
        <van-icon name="search" class="search-icon" />
        <div class="search-title">点击搜索旅行商品</div>
      </router-link>
    </div>
    <!-- 定制师推荐 -->
    <my-recommend></my-recommend>
    <!-- 精选路线 -->
    <div class="touristRoute">
      <van-icon name="location" />
      <div class="route-title">精选路线</div>
      <div class="route-sub">专业定制师特别设计,好评率99.9%</div>
      <div class="search">
        <div class="search-classify">
          <span>热门分类</span>
          <span v-for="(t, i) of classify" :key="i" @click="changeClassify(t)">{{ t }}</span>
        </div>
        <div class="themes">
          <router-link v-for="(t, i) of themes" :key="i" :to="`/tourMdetails/${t.gid}`">
            <div class="themes-items">
              <van-image :src="t.image"></van-image>
              <div class="themes-name">{{ t.name }}</div>
            </div>
          </router-link>
        </div>
      </div>
    </div>
    <!-- 商品列表 -->
    <div class="goodsList">
      <router-link :to="`/tourMdetails/${t.gid}`" v-for="(t, i) of goodsList" :key="i">
        <div class="good-item">
          <van-image fit="scale-down" :src="t.main_img"></van-image>
          <div class="good-info">
            <div class="good-title">{{ t.title }}</div>
            <div class="price">
              <span class="icon">¥</span>
              <span class="num">{{ t.price }}</span>
              起/人
              <span class="buy">{{ t.buy_count }}人已购买</span>
            </div>
          </div>
        </div>
      </router-link>
    </div>
    <!-- 点击查看更多路线 -->
    <router-link to="/search" tag="div" class="more">点击搜索更多路线</router-link>
    <!-- 尾部表单 -->
    <my-form></my-form>
    <div class="interval"></div>
    <my-footer></my-footer>
  </div>
</template>
<script>
// 引入商品列表API
import { getGoods } from '../server/goods.js';

export default {
  data() {
    return {
      // 保存热门分类
      classify: ['国内', '日韩', '东南亚', '欧美', '迪拜'],
      // 保存主题推荐
      themes: [
        {
          gid: 3,
          image: 'https://www.uniqueway.com/mix/mip/images/mall/cherry.png',
          name: '樱花',
        },
        {
          gid: 88,
          image: 'https://www.uniqueway.com/mix/mip/images/mall/class-honeymoon.jpg',
          name: '蜜月',
        },
        {
          gid: 42,
          image: 'https://www.uniqueway.com/mix/mip/images/mall/class-child.jpg',
          name: '亲子',
        },
        {
          gid: 100,
          image: 'https://www.uniqueway.com/mix/mip/images/mall/class-aurora.jpg',
          name: '极光',
        },
      ],
      // 保存商品列表
      goodsList: [],
    };
  },
  async mounted() {
    // 加载中
    this.$toast.loading({
      message: '加载中...',
      duration: 0,
      forbidClick: true,
    });
    // 调用API,获取商品列表,分类默认为国内
    await getGoods('国内')
      .then((result) => {
        this.goodsList = result;
      })
      .catch(() => {
        console.log(`该分类下暂无商品`);
      });
    // 数据加载完毕后关闭toast
    this.$toast.clear();
  },
  methods: {
    // 点击切换分类
    changeClassify(classify) {
      getGoods(classify)
        .then((result) => {
          this.goodsList = result;
        })
        .catch(() => {
          console.log(`该分类下暂无商品`);
        });
    },
  },
};
</script>

<style lang="scss">
@import './scss/travelMall.scss';
</style>
